<!--  -->
<template>
  <div>
    <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
      <el-checkbox
        v-for="item in checkData"
        :label="item.key"
        :key="item.key"
        >{{ item.name }}</el-checkbox
      >
    </el-checkbox-group>
    <div class="btn" @click="submit">提交</div>
    <div class="success" v-show="success">设置成功！</div>
  </div>
</template>

<script>
import { getUrlParams } from "../script/utils";
import { getInfo, saveOrUpdate } from "../api/index";
const { type, userId } = getUrlParams();
//type 0 形态 1指标
const techindex = [
  { key: "qscyDkDot", name: "趋势长盈DK点" },
  { key: "dkjcShortBsSignal", name: "多空决策(短线)" },
  { key: "dkjcMiddleBsSignal", name: "多空决策(中线)" },
  { key: "bhlnEnergyBsSignal", name: "冰火量能" },
  { key: "zhcmBsSignal", name: "主力筹码" },
  { key: "dxxlBsSignal", name: "短线寻龙" },
  { key: "slbyBsSignal", name: "双龙博弈" },
  { key: "jgnlBsSignal", name: "机构能量" },
  { key: "nxtjBsSignal", name: "牛熊天玑" },
  { key: "fundDepthSignal", name: "资金深度" },
  { key: "fundMotionSignal", name: "资金动量" },
  { key: "mainFundSignDay2Signal", name: "主力资金2日" },
  { key: "mainFundSignDay3Signal", name: "主力资金3日" },
  { key: "mainFundSignDay5Signal", name: "主力资金5日" },
  { key: "retailFundSignal", name: "散户资金" },
  { key: "netFundSignal", name: "净资金流" },
  //   { key: "macdSignal", name: "MACD" },
  //   { key: "djSignal", name: "KDJ" },
  //   { key: "kdSignal", name: "KD" },
  //   { key: "bollSignal", name: "BOLL" },
  //   { key: "biasSignal", name: "BIAS" },
  //   { key: "mtmSignal", name: "MTM" },
  //   { key: " rsiSignal", name: "RSI" },
  //   { key: "sarSignal", name: "SAR" },
  //   { key: "maSignal510", name: "均线5-10" },
  //   { key: " maSignal520", name: "均线5-20" },
  //   { key: "maSignal1030", name: "均线10-30" },
  //   { key: "maSignal1060", name: "均线10-60" },
  //   { key: "maSignal2060", name: "均线20-60" },
  //   { key: "maSignal60120", name: "均线60-120" },
  //   { key: "maSignal60250", name: "均线60-250" },
];
//形态
const shape = [
  { key: "1001", name: "锤头" },
  { key: "1003", name: "倒转锤头" },
  { key: "1005", name: "吊颈" },
  { key: "1006", name: "射击之星" },
  { key: "1008", name: "早晨之星" },
  { key: "1010", name: "黄昏之星" },
  { key: "1012", name: "墓碑" },
  { key: "1101", name: "阳夹阴" },
  { key: "1102", name: "阴夹阳" },
  { key: "1103", name: "阳吞阴" },
  { key: "1104", name: "阴吞阳" },
  { key: "1105", name: "乌云盖顶" },
  { key: "1106", name: "曙光初现" },
  { key: "1107", name: "好友反攻" },
  { key: "1108", name: "淡友反攻 " },
  { key: "1109", name: "搓揉线" },
  { key: "1110", name: "旭日初升" },
  { key: "1111", name: "倾盆大雨" },
  { key: "1112", name: "穿头破脚" },
  { key: "1113", name: "钳子顶" },
  { key: "1114", name: "钳子底" },
  { key: "1115", name: "身怀六甲" },
  { key: "1116", name: "看涨反冲" },
  { key: "1117", name: "弃婴" },
  { key: "1118", name: "多头镊底" },
  { key: "1120", name: "看涨三线直击" },
  { key: "1121", name: "向上跳空并列阴阳线" },
  { key: "1122", name: "上升跳空三法" },
  { key: "1123", name: "向上跳空并列阳线" },
  { key: "1124", name: "梯底" },
  { key: "1125", name: "竖状三明治" },
  { key: "1126", name: "十字启明星" },
  { key: "1127", name: "三内升" },
  { key: "1128", name: "三外升" },
  { key: "1129", name: "看涨倒锤头" },
  { key: "1130", name: "看涨孕线" },
  { key: "1131", name: "看涨吞没" },
  { key: "1132", name: "看涨十字星" },
  { key: "1133", name: "奇特三川底" },
  { key: "1134", name: "天量法则" },
  { key: "1135", name: "四串阴" },
  { key: "1136", name: "出水芙蓉" },
  { key: "1137", name: "创新高" },
  { key: "1138", name: "蜻蜓点水" },
  { key: "1139", name: "低开大阳线" },
  { key: "1140", name: "跳空缺口" },
  { key: "1141", name: "强势整理" },
  { key: "1142", name: "四串阳" },
  { key: "1143", name: "创新低" },
  { key: "1144", name: "高开大阴线" },
  { key: "2001", name: "红三兵" },
  { key: "2002", name: "黑三兵" },
  { key: "2003", name: "两只乌鸦" },
  { key: "2004", name: "三只乌鸦" },
  { key: "3001", name: "相同低价" },
  { key: "3002", name: "上升三法" },
  { key: "4001", name: "多头排列" },
  { key: "4002", name: "老鸭头" },
  { key: "4003", name: "低点搜寻" },
  { key: "4004", name: "突破" },
  { key: "4101", name: "剑" },
  { key: "4102", name: "空头排列" },
];

export default {
  data() {
    return {
      checkList: [],
      checkData: [],
      success: false,
    };
  },
  components: {},
  computed: {},
  mounted() {
    +type ? (this.checkData = techindex) : (this.checkData = shape);
    this.getInfo();
  },

  methods: {
    async getInfo() {
      const send = {
        userId: userId,
        settingType: type,
      };
      await getInfo(send).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          if (data && data[0]) {
            this.checkList = data[0].settingData.split(",");
          } else {
            this.checkList = this.checkData.map((item) => item.key);
          }
        }
      });
    },
    clearMess() {
      this.success = true;
      setTimeout(() => {
        this.success = false;
      }, 2500);
    },
    async saveOrUpdate() {
      const send = {
        userId: userId,
        settingType: type,
        settingData: this.checkList.join(","),
      };
      await saveOrUpdate(send).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          console.log(data);
          this.clearMess();
        }
      });
    },
    submit() {
      this.saveOrUpdate();
    },
    handleCheckedCitiesChange() {
      console.log(this.checkList);
    },
  },
};
</script>
<style>
.el-checkbox-group .el-checkbox__label {
  font-size: 16px;
  color: #e6e6e6;
}
.el-checkbox__inner,
.el-checkbox__input.is-focus .el-checkbox__inner {
  background-color: #1f2025;
  border: 1px solid #5c5e69;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #ea2827;
}
.el-checkbox__inner::after {
  box-sizing: content-box;
  content: "";
  border: 1px solid #e63535;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 0.05s;

  transform-origin: center;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #1f2025;
  border-color: #e63535;
}
</style>
<style lang="scss" scoped>
.btn {
  width: 238px;
  height: 40px;
  background: linear-gradient(0deg, #343845, #4e596d);
  border: 1px solid #3d3d4b;
  border-radius: 2px;
  cursor: pointer;
  margin: 51px auto 5px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 40px;
  &:hover {
    background: linear-gradient(180deg, #b93636, #6a0101);
    border: 1px solid #b83636;
  }
}
.success {
  text-align: center;
  font-size: 16px;
  color: #ff8a00;
}
</style>
